<template>
  <div class="CompanyIdentity">
    <CutImage v-if="imageState" />
    <img v-if="!imageUrl" src="../../../assets/img/Group.png" alt="">
    <div class="img">
      <div v-if="imageUrl">
        <img class="uploadImg" :src="imageUrl" alt="">
        <img class="closeImg" src="../../../assets/img/ico-red-close.png" alt="" @click="handleRemove">
      </div>
      <Upload name="image" v-if="!imageUrl"
              action=""
              :format="['jpg','jpeg','png']"
              :show-upload-list="false"
              :before-upload="handleBefore">
        <div>
          <!-- <Button type="ghost" icon="plus" class="upLoadButton"></Button> -->
          <div class="upLoadButton">
            <img src="../../../assets/img/营业执照.png" alt="">
            <p>请上传营业执照照片</p>
          </div>
        </div>
      </Upload>
    </div>
    <div v-if="imageUrl" style="height:13rem"></div>
    <div v-show="uploadState" class="imgForm">
      <Form ref="identityForm" :model="identityForm"   >
        <FormItem prop='company' style="height: 0.5rem;" :rules="validator.chinese" :maxlength="30">
          <Input type="text" v-model="identityForm.company"  placeholder="公司名称"></Input>
        </FormItem>
        <FormItem prop='blicno' style="height: 0.5rem;" :rules="validator.socialCode">
          <Input type="text" v-model="identityForm.blicno"  placeholder="统一社会信用代码"></Input>
        </FormItem>
        <FormItem prop='name' style="height: 0.5rem;" :rules="validator.chinese" :maxlength="15">
          <Input type="text" v-model="identityForm.name"  placeholder="法定代表人姓名"></Input>
        </FormItem>
        <FormItem prop='cerno' style="height: 0.5rem;" :rules="validator.cerno" >
          <Input type="text" v-model="identityForm.cerno"  placeholder="法定代表人身份证号码"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" long @click="handleSubmit()">进入实名认证</Button>
        </FormItem>
      </Form>
    </div>
    <div>
      <MyFooter  class="login_bottom"/>
    </div>
  </div>
</template>

<script>
  import MyFooter from '../../../components/MyFooter.vue'
  import request from '../../../utils/request.js'
  import CutImage from '../../../components/CutImmage.vue'
  import validator from '../../../utils/validatorUtil.js'
    export default {
      data() {
        return {
          validator,
          symbol: Symbol(),
          uploadState: false,
          image: '',
          imageUrl: '',
          identityForm: {
            company: '',
            blicno: '',
            name: '',
            cerno: ''
          }
        }
      },
      computed: {
        imageState() {
          return this.$store.state.imageBase.imageState
        },
        getSymbol() {
          return this.$store.state.imageBase.symbol
        },
        getBase64() {
          return this.$store.state.imageBase.base64
        },
        getFile() {
          return this.$store.state.imageBase.file
        }
      },
      watch: {
        getFile() {
          if (this.symbol === this.getSymbol) {
            this.image = this.getFile
            this.imageUrl = this.getBase64
            this.sendData()
          }
        }
      },
      mounted() {
        localStorage.setItem('regorg', this.$route.params.regorg)
      },
      methods: {
        handleBefore(file) {
          // 创建一个 FileReader 对象
          let reader = new FileReader()
          // readAsDataURL 方法用于读取指定 Blob 或 File 的内容
          // 当读操作完成，readyState 变为 DONE，loadend 被触发，此时 result 属性包含数据：URL（以 base64 编码的字符串表示文件的数据）
          // 读取文件作为 URL 可访问地址
          reader.readAsDataURL(file)

          reader.onloadend = e => {
            this.$store.dispatch('storeSymbol', { symbol: this.symbol })
            this.$store.dispatch('showCutImage', { base64: reader.result, sign: 'ent', fileSize: file.size, fileName: file.filename })
          }
          return false
        },
        sendData() {
          // let postData = new FormData()
          // postData.append('image', this.image)
          // request.post('/system/user/entLicenseOCR.do', postData
          // ).then((response) => {
          //   if (response.data.result === 'error') {
          //     this.$ErrorAlert(response.data.message)
          //     this.uploadState = true
          //     return false
          //   } else {
          //     this.identityForm.company = response.data.data.company
          //     this.identityForm.blicno = response.data.data.register_number
          //     this.identityForm.name = response.data.data.name
          //     this.uploadState = true
          //   }
          // }).catch(function(error) {
          //   console.log(error)
          // })
          this.uploadState = true
        },
        handleRemove() {
          this.imageUrl = ''
          this.image = ''
          this.uploadState = false
          this.identityForm = {}
        },
        handleSubmit() {
          this.$refs['identityForm'].validate((valid) => {
            if (valid) {
              let postData = new FormData()
              postData.append('image', this.image)
              postData.append('company', this.identityForm.company)
              postData.append('blicno', this.identityForm.blicno)
              postData.append('name', this.identityForm.name)
              postData.append('cerno', this.identityForm.cerno)
              postData.append('regorg', this.$route.params.regorg)
              request.post('/interface/out/wechat/goToEntIdentity.do', postData
              ).then((response) => {
                if (response.data.result === 'error') {
                  this.$ErrorAlert(response.data.message)
                } else {
                  let url = 'https://iauth.wecity.qq.com/new/cgi-bin/auth.php'
                  let params = {}
                  params.appid = response.data.data.appid
                  params.redirect = response.data.data.redirect
                  params.sceneID = response.data.data.sceneID
                  params.signature = response.data.data.signature
                  params.out_trade_no = response.data.data.out_trade_no
                  params.out_extra = response.data.data.out_extra
                  params.type = response.data.data.type
                  params.uid = response.data.data.uid
                  params.ID = response.data.data.ID
                  params.name = response.data.data.name
                  params.pic_key = response.data.data.pic_key
                  // 请求跳转路径
                  var temp = document.createElement('form')
                  temp.action = url
                  temp.method = 'post'
                  temp.style.display = 'none'
                  for (var x in params) {
                    var opt = document.createElement('textarea')
                    opt.name = x
                    opt.value = params[x]
                    temp.appendChild(opt)
                  }
                  document.body.appendChild(temp)
                  temp.submit()
                  return temp
                }
              })
            }
          })
        }
      },
      components: {
        MyFooter,
        CutImage
      }

    }
</script>

<style scoped>
  .CompanyIdentity{
    height: 100vh;
    position: relative;
    overflow: auto;
  }
   .CompanyIdentity>img{
     display: block;
     margin: 1rem auto;
   }
  .CompanyIdentity .img .uploadImg{
    width: 66%;
    height: 50vh;
    position: absolute;
    top: .5rem;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .CompanyIdentity .img .closeImg{
    width: 1.5rem;
    height:1.5rem;
    position: absolute;
    top: 0;
    left: 75%;
  }
  .CompanyIdentity .upLoadButton{
    width: 66%;
    height: 50vh;
    border: 1px solid gainsboro;
    border-radius: 10px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .CompanyIdentity .upLoadButton img{
    display: block;
    margin: 2rem auto 0;
  }
  .CompanyIdentity .upLoadButton p{
    margin-top: .5rem;
    text-align: center;
    color: gainsboro;
  }
  /* .CompanyIdentity .upLoadButton::after{
    content: '请上传营业执照照片'
  } */
  .CompanyIdentity .login_bottom{
    width: 100%;
    height: 10vh;
    position: absolute;
    top: 90%;
    /* left: 25%; */
  }
  .imgForm{
    padding: .2rem;
  }
</style>
